<template>
	<div class="main" id="news">
		<div class="v_head">
      {{logStus}}
			<h1 class="v_h1">{{detailNews.title}}</h1>
			<!-- 头像 -->
			<div class="v_face">
				<img :src="detailNews.authorUrl" alt="">
				<span class="v_name">{{detailNews.author}}</span>
			</div>
			<!-- 下方 -->
			<ul class="v_ul">
				<li>{{detailNews.createTime}}</li>
				<li><img src="../../../assets/image/yanjing.png" alt="">{{detailNews.queryCount+1}}</li>
				<li @click="toComment()"><img src="../../../assets/image/xx.png" alt="">{{detailNews.commentCount}}</li>
				<li @click="collect(0)" v-if="detailNews.isCollect == 'N'" alt='收藏'><img class="img" src="../../../assets/image/sc.png" alt="">收藏</li>
				<li @click="collect(1)" v-if="detailNews.isCollect == 'Y'" alt="取消收藏">⭐️已收藏</li>
			</ul>
			<!-- <img class="btn" src="../../../assets/image/attention.png" alt="" @click="addFollow"> -->
		</div>
		<!-- 线 -->
		<section class="line">
		</section>
		<!-- 名词 -->
    <!-- <h2 class="h2">名词解释</h2> -->
    <section v-html="detailNews.contents" class="contents">
        {{detailNews.contents}}
    </section>

		<section class="line">
		</section>
		<!-- 下面开始评论区 -->
		<div class="discuss" v-if="hasComment" v-for="(item,index) in comments" :key="index">
			<div class="des_wrap">
				<div class="dec_pic huifu-pic">
				<img :src="item.userHeadPortrait" alt="">
				</div>
				<section class="dec_desc">
					<div class="dec_container">
						<div class="dec_title">
							<p class="text">{{item.userNickName}}</p>
							<em class="date">{{item.updateTime}}</em>
						</div>
						<div class="right1">
							<img src="../../../assets/image/zan.png" alt="">
							<em class="right">{{item.commentCount}}</em>
						</div>
					</div>
					<p class="content">{{item.comment}}</p>
					<span class="remove" @click="delComment()">删除</span>
				</section>
			</div>
			<!-- 二级 -->
			<!-- <div class="huifu">
				<div class="des_wrap">
					<div class="dec_pic">
						<img :src="detailNews.authorUrl" alt="">
					</div>
					<section class="dec_desc">
						<div class="dec_container">
							<div class="dec_title">
								<p class="text">微笑达人</p>
								<em class="date">2018-06-26</em>
							</div>
							<div class="right1" style="padding-right:30px;">
								<img src="../../../assets/image/yanjing.png" alt="">
								<em class="right">1300</em>
							</div>
						</div>
						<p class="content" style="font-size:15px;color:#5d5d5d;">
							从流行的设计风格到符合产品定位的设计风格,再到充满品牌个性的设计风格,我和设计师在这中间经历了很多挫折。索性我们一直没有放弃，期间不断探索试错，沉淀方法，历经将近一年的时间最后终于找到了答案（在传统方法上的突破和创新）。
						</p>
						<div class="remove">
							<a style="padding-right:30px;" href="#">回复</a>
						</div>
					</section>
				</div>
			</div> -->

		</div>
    <div class="discuss">
			<div class="huifu huifu2">
				<div class="des_wrap">
					<div class="dec_pic">
						<img :src="loginInfo.detail.headPortrait" :onerror="errorImg" alt="" v-if="userId != 0">
						<img src="../../../assets/image/default.png" :onerror="errorImg" alt="" v-if="userId == 0">
					</div>
					<section class="dec_desc">
						<div class="dec_container">
							<div id="edito" class="right1" style="padding-right:30px;">
								<span class="f_left">
									<i class="icon-back"></i>
									<i class="icon-go"></i>
									<i class="icon-blod"></i>
									<i class="icon-bq"></i>
									<i class="icon-img"></i>
								</span>
								<span class="f_right">
									<i class="icon-com"></i>
								</span>
							</div>
						</div>

					</section>
				</div>
				<div ref="border" class="editoContent">
					<textarea @focus="focu" @blur="blur" v-model="comment"></textarea>
					<button class="edito-btn" @click="sendComment">发送</button>
				</div>
			</div>
    </div>
	</div>
</template>
<script>
import {mapActions, mapState,mapGetters} from 'vuex'
import Service from '@/service/service'
export default {
  props:["detailNews","detailNewsContent","mainId","comments","hasComment"],
  data() {
    return {
      msg: "你好",
			userId:sessionStorage.getItem("userId")||0,
      newsId:'',
      nowData:'',
      comment:'',
      commentId:0,
      loginInfo: JSON.parse(sessionStorage.getItem("loginInfo"))||'',
      errorImg:'this.src="' + require('../../../assets/image/pg1.png') + '"'
    };
  },
  mounted () {
  },
  computed: {
    logStus:function(){
      return this.$store.getters.getStus
    }
  },
  methods: {

    focu() {
      let el = this.$refs.border;
      el.style.border = "1px solid #fdc901";
    },
    blur() {
      let el = this.$refs.border;
      el.style.border = "";
    },
    send(){
      let data={
        param:{
          detail:{
            textarea:this.detail.textarea
          }
        }
      }
    },
    sendComment() {
      // 发表评论
      let _this = this;

      let data = {
        param: {
          detail:{
            comment: this.comment,
            id:'',
            mainId: this.mainId,
            toUserId:'',
            type:'news',
            userId:this.userId
          }
        },
      };
      Service.myAjax(
        {
          method: "post",
          url: Service.baseUrl + "/dynamic/saveComment",
          data: data
        },
        function(response) {
          const data = response.data;
          console.log(data)
          if(data.resultCode != 0){
            _this.comment = '';
            _this.commentId = data.data.detail.id;
            console.log(commentId)
            _this.$parent.searchComments(_this.mainId)
          }else{

          }

        },
        function(error) {
          console.log(error)
        }
      )
    },
    collect (arg){
      // 收藏
      let _this = this;
      let userId = this.userId;
      // 获取咨询详情
      let data = {
        param: {
          mainId: this.mainId,
          type:'news'
        },
        userId: userId
      };

        if(arg == 0){
          // 收藏
          Service.myAjax(
            {
              method: "post",
              url: Service.baseUrl + "/news/addCollect",
              data: data
            },
            function(response) {
              const {data} = response.data;
              _this.detailNews.isCollect = 'Y'
            },
            function(error) {
              console.log(error)
            }
          )
        }else{

          Service.myAjax(
            {
              method: "post",
              url: Service.baseUrl + "/news/delCollect",
              data: data
            },
            function(response) {
              const {data} = response.data;
              _this.detailNews.isCollect = 'N'
            },
            function(error) {
              console.log(error)
            }
          )
        }

    },
    addFollow (ind) {
      // 关注
      const _this = this;
      const userId =this.userId;
      if(userId == 0){
        // 未登录
      }else{

        let data = {
          param: {
            toUserId:''
          },
          userId: userId
        };
        Service.myAjax(
          {
          method: "post",
          url: Service.baseUrl + "/news/addFollow",
          data: data
          },
          function(response) {
            const {data} = response.data;

          },
          function(error) {
            console.log(error)
          }
        );
      }
    },
    toComment() {
      // 去评论
      const _this = this;
      const userId =this.userId;
      if(userId == 0){
        // 未登录
        // alert('去登录');
        this.$store.dispatch("setLogStus",true)

      }else{
        this.handleScroll();
      }
    },
    delComment(){
      // 删除评论

      let _this = this;

      const userId =this.userId;
      if(userId == 0){
        // 未登录
        this.$store.dispatch("setLogStus",true)

      }else{
        let data = {
          param: {
            detail:{
              id:this.commentId,
              mainId: this.mainId,
              type:'dynamic',
            }
          },
        };
        Service.myAjax(
          {
            method: "post",
            url: Service.baseUrl + "/dynamic/deleteComment",
            data: data
          },
          function(response) {
            const data = response.data;
            console.log(data)
            if(data.code != 0){
              _this.comment = '';
              _this.$parent.searchComments(_this.mainId)
            }else{

            }

          },
          function(error) {
            console.log(error)
          }
        )
      }
    },
    handleScroll () {
      // 设置页面滚动到底部
      document.documentElement.scrollTop =document.body.clientHeight;
    },
  }
};
</script>
<style lang="scss" >
.main {
  width: 940px;
  .v_head {
    border: 1px solid #adadad;
    height: 210px;
    position: relative;
    .v_h1 {
      font-size: 20px;
      font-weight: 800;
      padding: 26px 0 0 36px;
    }
    .v_face {
      padding: 24px 0 0 30px;
      font-size: 20px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50px
      }
      .v_name {
        padding-left: 8px;
        font-size: 16px;
        font-weight: 600
      }
    }
    .v_ul {
      font-size: 18px;
      color: #666;
      display: flex;
      justify-content: space-between;
      padding: 24px 94px;
      li {
        font-size: 14px;
        cursor: pointer;

        img {
          width: 16px;
          margin-right: 5px;
          cursor: pointer;
        }
      }
    }
    .btn {
      position: absolute;
      right: 57px;
      top: 25px;
      cursor: pointer;
    }
  }
  .contents{
    font-size: 16px;
  }
  .contents>div>p{
    font-size: 14px;
    padding-top: 10px;
  }
  .contents img{
    width: 100%;
    margin: 10px 0
  }
  .line {
    background: #f9cf38;
    height: 2px;
    margin: 30px 0;
  }
  .h2 {
    font-weight: 800;
    padding-bottom: 20px;
    font-size: 22px;
  }
  .h3 {
    font-size: 16px;
    line-height: 24px;
  }
  .v_pic {
    padding: 40px 0 30px 0;
  }
  .discuss {
    background: #f5f5f5;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #fff;

    .des_wrap {
      display: flex;
        .huifu-pic{
          width: 80px;
          text-align: right
        }
      .dec_pic {
        // width: 100px;
        text-align: center;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50px
        }
      }
      .dec_desc {
        width: 830px;
        .dec_container {
          display: flex;
          justify-content: space-between;
          font-size: 18px;
          .dec_title {
            .text {
              color: #444;
              font-size: 20px;
              // padding-top: 4px;
              // padding-bottom: 9px;
            }
            .date {
              color: #666;
              font-size: 14px
            }
          }
          .right1 {
            img {
              width: 18px;
              vertical-align: middle
            }
            .right {
              color: #888;
              font-size: 22px;
              vertical-align: middle
            }
          }
        }
        .content {
          padding-top: 26px;
          font-size: 15px;
          color: #333;
          line-height: 24px;
          font-weight: 800;
          padding-right: 10px;
          text-indent: 14px;
        }
        .remove {
          padding-top: 30px;
          height: 30px;
          float: right;
          color: #318bff;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    // 第二个聊天记录
    .huifu {
      padding-top: 30px;
      background: #fff;
      width: 900px;
      margin: 0 auto;
      .des_wrap {
        display: flex;

        .dec_pic {
          // width: 100px;
          margin: 0 14px 0 26px;
          text-align: center;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .dec_desc {
          width: 830px;
          .dec_container {
            display: flex;
            justify-content: space-between;
            font-size: 18-4px;
            .dec_title {
              .text {
                color: #222;
                font-size: 22-4px;
                padding-top: 4px;
                padding-bottom: 9px;
              }
              .date {
                color: #666;
              }
            }
            .right1 {
              img {
                width: 22px;
              }
              .right {
                color: #222;
                font-size: 22-4px;
              }
            }
          }
          .content {
            padding-top: 26px;
            font-size: 16px;
            color: #333;
            line-height: 20px;
            font-weight: 800;
          }
          .remove {
            padding-top: 30px;
            height: 30px;
            a {
              float: right;
              font-size: 16px;
              color: #318bff;
            }
          }
        }
      }
    }
    .huifu2 {
      margin-top: 20px;
    }
  }
}
#edito {
  font-size: 28px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  margin-right: 24px;
  .f_right {
    float: right;
    i {
      cursor: pointer;
    }
    i:hover {
      opacity: 0.4;
    }
  }
  .f_left {
    padding-left: 40px;
    i {
      padding-left: 10px;
      cursor: pointer;
    }
    i:hover {
      opacity: 0.4;
    }
    i:nth-child(1) {
      font-size: 26px;
      color: #318afb;
    }
    i:nth-child(2) {
      font-size: 22px;
      color: #bababa;
    }
    i:nth-child(3) {
      font-size: 20px;
      position: relative;
      top: -4px;
    }
    i:nth-child(4) {
      font-size: 34px;
      position: relative;
      top: 3px;
    }
    i:nth-child(5) {
      font-size: 26px;
    }
  }
}
.editoContent {
  width: 850px;
  margin: 0 auto;
  min-height: 160px;
  border: 1px solid #adadad;
  margin-top: 10px;
  position: relative;
  textarea {
    resize: none;
    font-size: 18px;
    padding: 10px;
    width: 97%;
    height: 94px;
  }
  .edito-btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: #ffc902;
    color: #fff;
    width: 70px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
